<template>
	<el-dialog v-loading="loading" :close-on-click-modal="false" :title="title" width="500px" :visible.sync="visible" @cancel="close">
		<el-form ref="form" :rules="rules" size="small" :model="form">
			<el-form-item prop="name" label="名称"><el-input v-model="form.name" placeholder="请填入内容" /></el-form-item>
			<el-form-item prop="classifyCode" label="编码"><el-input v-model="form.classifyCode" placeholder="请填入内容" /></el-form-item>
			<el-form-item prop="description" label="说明"><el-input v-model="form.description" placeholder="请填入内容" /></el-form-item>
		</el-form>

		<div slot="footer" class="dialog-footer">
			<el-button class="cancelBtn" @click="close">放弃</el-button>
			<el-button class="trueBtn" type="primary" :loading="loading" @click="handleSave">确定</el-button>
		</div>
	</el-dialog>
</template>

<script>
import { addClassify, updateClassify } from '@/api/wxappClassify';

export default {
	name: 'GroupFormDialog',
	props: {
		scope: {
			type: Number,
			require: true
		}
	},
	data() {
		return {
			loading: false,
			visible: false,
			title: '',
			mode: '',
			reject: null,
			resolve: null,
			groupId: null,
			form: {
				name: ''
			},
			rules: {
				name: [
					{
						required: true,
						message: '请输入分组名',
						trigger: 'blur'
					}
				],
				classifyCode: [
					{
						required: true,
						message: '请输入编码',
						trigger: 'blur'
					}
				]
			}
		};
	},
	methods: {
		add() {
			return new Promise((resolve, reject) => {
				this.resolve = resolve;
				this.reject = reject;
				this.visible = true;
				this.mode = 'add';
				this.title = '新增分组';
				this.form.name = '';
			});
		},
		edit(group) {
			return new Promise((resolve, reject) => {
				this.resolve = resolve;
				this.reject = reject;
				this.visible = true;
				this.mode = 'edit';
				this.title = '编辑分组';
				this.form = JSON.parse(JSON.stringify(group));
				this.groupId = group.id;
			});
		},
		close() {
			this.visible = false;
			this.resolve = null;
			this.reject = null;
			this.form.name = '';
		},
		handleSave() {
			this.$refs.form.validate(valid => {
				if (valid) {
					this.loading = true;
					const data = this.form;
					if (this.mode === 'add') {
						addClassify(data)
							.then(resp => {
								this.loading = false;
								if (resp.code === 0) {
									this.$notify({ title: '成功', message: '添加成功', type: 'success', duration: 2000 });
									this.resolve && this.resolve();
									this.close();
								}
							})
							.catch(() => {
								this.loading = false;
							});
					} else {
						data['id'] = this.groupId;
						updateClassify(data)
							.then(resp => {
								this.loading = false;
								if (resp.code === 0) {
									this.$notify({ title: '成功', message: '修改成功', type: 'success', duration: 2000 });
									this.resolve && this.resolve();
									this.close();
								}
							})
							.catch(() => {
								this.loading = false;
							});
					}
				}
			});
		}
	}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-dialog__header .el-dialog__title {
	color: $btnBgc;
}
::v-deep .el-input__inner,
.el-textarea__inner:focus {
	border-color: $btnBgc;
}
.dialog-footer{
	.cancelBtn:hover{
		background-color: $btnBgc;
		border-color: white;
		color: white;
	}
	.trueBtn{
		background-color: $btnBgc;
		border-color: white;
	}
}
::v-deep .el-dialog__headerbtn .el-dialog__close:hover{
	color: $btnBgc;
}
</style>
